<template>
	<div>

		<input type="text" v-model="msg">
		<br>
		<span>{{msg}}</span>
		<p>{{msgByComputed}}</p>
		<comC2 :numerFromComC="msg"></comC2>
		<comC2 :numerFromComC="msgByComputed"></comC2>
		<br>
		<br>
		<br>
		<div><span>================</span></div>
		<br>
		<br>
		<br>

		<comC2>
			<span slot="slotA">佘山 </span>
			<a slot="slotB">西岭路</a>
		</comC2>


		<div><span>================</span></div>

		<transition name="moveComC">
			<div v-show="change">
				<p :is="currentView"></p>
			</div>

		</transition>
		<button @click="changeChildenCom">切换组件com2/com3</button>


	</div>
</template>


<script>
    import comC2 from './comC2'
    import comC3 from './comC3'

    export default {
        name: "comC",
        components: {
            comC2,
            comC3
        },
        data: function () {
            return {
                msg: 'sss',
                change: true,
                currentView: 'comC2'
            }
        },
        computed: {
            msgByComputed: function () {
                return this.msg + '.txt'
            }
        },
        watch: {
            msg: function (v, ov) {
                if (v === 'aaa') {
                    alert('ojbk')
                }
            }
        },
        methods: {
            changeChildenCom: function () {
                this.change = !this.change
                if (this.change) {
                    this.currentView = 'comC2'
                } else {
                    this.currentView = 'comC3'
                }
            }
        }
    }
</script>


<style scoped>

	.moveComC-enter-active,.moveComC-leave-active{
		transition: all 2s ease-in-out;
	}

	.moveComC-enter{
		transform: translateY(-500px) ;
		opacity: 0;
	}

	.moveComC-leave-active{
		transform: translateY(500px) ;
		opacity: 0;
	}

</style>